<template>
  <div style="padding: 15px">
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="500"
      :data="tableData"
      :loading="loading"
    >
      <vxe-table-column field="violationTime" title="违章时间" min-width="100" />
      <vxe-table-column field="violationPlace" title="违章地址" min-width="100" />
      <vxe-table-column field="violationProject" title="违章行为" min-width="100" />
      <vxe-table-column field="penaltyAmount" title="违章罚款" min-width="100" />
      <vxe-table-column field="deductPoints" title="违章记分" min-width="100" />
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="form.pageNum"
      :page-size.sync="form.pageSize"
      :total="form.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import { vehicleViolationCode } from "@/api/vehicleService";
Vue.use(VXETable);
export default {
  name: "VehicleViolationDetail",
  data() {
    return {
      tableData: [],
      loading: false,
      form: {
        vehicleCode: "",
        pageNum: 1,
        pageSize: 10,
        sortField: "",
        sortType: "",
        total: 0
      }
    };
  },
  methods: {
    getInfo(code) {
      this.loading = true;
      this.tableData = [];
      if (code) this.form.vehicleCode = code
      vehicleViolationCode(this.form).then(response => {
        this.tableData = response.data.records;
        this.form.total = response.data.total;
        this.loading = false;
      });
    },
    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.form.pageNum = currentPage
      this.form.pageSize = pageSize
      this.getInfo()
    }
  }
};
</script>
